<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
		<style type="text/css">
			body {
				padding-top: 0;
			}
		</style>
	</head>

	<body>

		<div class="container-fluid">
			<form id="sbmit">
				<div class="panel panel-default">
					<form>
						<div class="panel-heading">
							<div class="input-group">
								<label class="input-group-addon">一级</label>
								<select class="form-control" id="parent" value="2" name="pid">
								</select>
							</div><br />
							<div class="input-group">
								<label class="input-group-addon">二级</label>
								<select class="form-control" id="cid" name="cid">
									<option value="">二级栏目</option>
								</select>
							</div><br />
							<p>视频</p>
							<form class="form-inline form-all">
								<div class="form-group">
									<div class="input-group" style="width: 300px;float: left;">
										<div class="input-group-addon">等级</div>
										<input type="text" class="form-control input-group-sm" id="capability" placeholder="等级" value="">
									</div>
									<div class="input-group" style="width: 300px;float: left;">
										<div class="input-group-addon">名称</div>
										<input type="text" class="form-control input-group-sm" id="key" placeholder="标题" value="">
									</div>
									<button type="button" style="float: right;" class="btn btn-primary" id="btn-sub">查询</button>
								</div><br />
							</form>
						</div>
						<div class="table-responsive">
							<table class="table table-hover table-striped">
								<thead>
									<tr>
										<th>#</th>
										<th>等级</th>
										<th class="col-md-2">标题</th>
									</tr>
								</thead>
								<tbody id="table-body"></tbody>
								<tr>
									<td colspan="4" class="text-right">
										<button id="save" type="button" style="float: right;" class="btn btn-primary" id="btn-sub">保存</button>
									</td>
								</tr>
							</table>
						</div>
					</form>
					<nav style="text-align: right">
						<ul class="pagination"></ul>
					</nav>
				</div>
			</form>
		</div>

		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/url.min.js"></script>
		<script src="js/common.js"></script>
		<script language="JavaScript">
			var id = $.url('?id');
			var page = $.url('?page');
			var pid = $.url("?pid");
			var cid = $.url("?cid");
			var capability = $.url("?capability");
			var key = $.url("?key");
			var opts = {
				"page": (page != null) ? page : 1,
				"count": 10,
				"type": 2
			};
			
			$(function() {
				if(capability != null && capability != ""){
					opts["capability"] = capability;
					$("#capability").val(capability);
				}
				if(key != null && key != ""){
					opts["key"] = key;
					$("#key").val(key);
				}
				if(cid != null && cid != ""){
					opts["cid"] = cid;
				}
				if(pid != null && pid != ""){
					opts["pid"] = pid;
					api.categoryChildList(opts);
				}
				api.LessonAddList(opts);
				api.categoryParentList(opts);
			})
			$("#save").on("click", function() {
				var opts = $("#sbmit").serialize();
				api.categoryLessonAdd(opts);
			});
			$("#btn-sub").on("click", function() {
				var key = $("#key").val(),
					capability = $("#capability").val();
				opts.key = key;
				opts.capability = capability;
				opts["page"] = 1;
				api.LessonAddList(opts);
			});
			$("#parent").on("change", function() {
				var op = {
					"pid": $("#parent").val()
				};
				if($("#parent").val() == "") {
					var h = '<option value="">二级栏目</option>';
					$("#cid").html(h);
				} else {
					api.categoryChildList(op);
				}
			});
		</script>
	</body>

</html>